<template>
    <div id="root">
        <Tree :data="list" :change="handleChange" v-on:sentDataToRoot="reseverData"></Tree>
    </div>
</template>
<script>
    import Tree from "./Tree.vue";
    export default {
        name: "treeRoot",
        components: {
            Tree
        },
        props: {
            data: {
                type: Array,
                default: () => {
                    return [];
                },
                required: true,
                validator: function (value) {
                    return value instanceof Array;
                }
            },
            change: {
                type: Function
            }
        },
        data() {
            return {
                list: [],
                selectList: []
            };
        },
        created() {
            this.list = this.$props.data;

        },
        methods: {
            reseverData(data) {
                console.log("下一层组件传上来的值");
                console.log(data);
            },

            // 判断选中
            handleChange(data) {
                console.log("handleChange");
                console.log(data);
                this.$emit("sentDataToRoot", data)
            },
        },
        watch: {
            selectList(data) {
                console.log("watch");
                this.$props.change(data);
                this.selectList.concat(data);
                console.log(this.selectList);
            }
        }
    };
</script>
<style scoped>
    .treeRoot {
        list-style: none;
    }

    .treeNode {
        line-height: 24px;
        margin: 0;
        padding: 8px 20px;
        cursor: pointer;
        color: #666666;
    }

    .treeItem,
    .treeGroup {
        transition: background-color 0.5s;
    }

    .treeItem:hover,
    .treeGroup:hover {
        color: #333333;
        background-color: #e9e9e9;
    }

    .treeGroupContainer {
        min-height: 1px;
        overflow: hidden;
    }

    .treeCollaps {
        height: 0;
    }
</style>